<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
{% load static%}

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>划定区域</title>

    <link rel="stylesheet" href="/media/css/bootstrap-off-canvas-nav.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-off-canvas-nav.js"></script>
    <link href="/media/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
 <link rel="stylesheet" href="/media/video/style1.css">
  <link rel="stylesheet" href="/media/video/style.css">
   <link rel="stylesheet" href="/media/video/style2.css">
<link rel="stylesheet" href="/media/back/back.css">
    <style>
        .font-type {
            color: white;
        }

        .position1 {
            position: relative;
            float: left;
            width: 20%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

        body {
            position: relative;
            overflow-x: hidden;
        }

        body,
        html {
            height: 100%;
            background-color: white;
        }

        .nav .open>a {
            background-color: transparent;
        }

        .nav .open>a:hover {
            background-color: transparent;
        }

        .nav .open>a:focus {
            background-color: transparent;
        }

        /*-------------------------------*/
        /*           Wrappers            */
        /*-------------------------------*/
        #wrapper {
            height: 0px;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            padding-left: 0;
            transition: all 0.5s ease;
        }

        #wrapper.toggled {
            padding-left: 220px;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 220px;
        }

        #wrapper.toggled #page-content-wrapper {
            margin-right: -220px;
            position: absolute;
        }

        #sidebar-wrapper {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            background: #1a1a1a;
            height: 100%;
            left: 220px;
            margin-left: -220px;
            overflow-x: hidden;
            overflow-y: auto;
            transition: all 0.5s ease;
            width: 0;
            z-index: 1000;
        }

        #sidebar-wrapper::-webkit-scrollbar {
            display: none;
        }

        #page-content-wrapper {
            padding-top: 70px;
            width: 100%;
        }



        /*-------------------------------*/
        /*       Hamburger-Cross         */
        /*-------------------------------*/
        .hamburger {
            background: black;
            border: none;
            display: block;
            height: 32px;
            margin-left: 15px;
            position: fixed;
            top: 20px;
            width: 32px;
            z-index: 999;
        }

        .hamburger:hover {
            outline: none;
        }

        .hamburger:focus {
            outline: none;
        }

        .hamburger:active {
            outline: none;
        }

        .hamburger.is-closed:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-closed:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        .hamburger.is-closed:hover .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            top: 0;
        }

        .hamburger.is-closed:hover .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            bottom: 0;
        }

        .hamburger.is-closed .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            top: 5px;
        }

        .hamburger.is-closed .hamb-middle {
            background-color: rgba(255, 255, 255, 0.7);
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-closed .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            bottom: 5px;
        }

        .hamburger.is-closed .hamb-top,
        .hamburger.is-closed .hamb-middle,
        .hamburger.is-closed .hamb-bottom,
        .hamburger.is-open .hamb-top,
        .hamburger.is-open .hamb-middle,
        .hamburger.is-open .hamb-bottom {
            height: 4px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        .hamburger.is-open .hamb-top {
            -webkit-transform: rotate(45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open .hamb-middle {
            background-color: #ffffff;
            display: none;
        }

        .hamburger.is-open .hamb-bottom {
            -webkit-transform: rotate(-45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-open:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        /*-------------------------------*/
        /*          Dark Overlay         */
        /*-------------------------------*/
        .overlay {
            position: fixed;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .top_div {
            background-color: rgba(0, 0, 0, 1);
            padding-top: 10px;
        }



        .dropdown-menu li {
            padding-left: 30px;
        }



        .dark-matter {

            /* margin-left: auto; */

            /* margin-right: auto; */

            /* max-width: 500px; */

            background: #555;

            /* padding: 20px 30px 20px 30px; */

            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

            color: #D3D3D3;

            text-shadow: 1px 1px 1px #444;

            /* border: none; */
            /* border-radius: 5px; */

            /* -webkit-border-radius: 5px; */

            /* -moz-border-radius: 5px; */

        }

        .dark-matter form {
            width: 100%;
        }

        .dark-matter h1 {

            padding: 0px 0px 10px 40px;

            display: block;

            border-bottom: 1px solid #444;

            margin: -10px -30px 30px -30px;

        }

        .dark-matter h1>span {

            display: block;

            font-size: 11px;

        }

        .dark-matter label {

            display: block;

            margin: 0px 0px 5px;

        }

        .dark-matter label>span {

            float: left;

            width: 20%;

            text-align: right;

            padding-right: 10px;

            margin-top: 10px;

            font-weight: bold;

        }

        .dark-matter input[type="text"],
        .dark-matter input[type="email"],
        .dark-matter textarea,
        .dark-matter select {

            border: none;

            color: #525252;

            height: 25px;

            line-height: 15px;

            margin-bottom: 16px;

            margin-right: 6px;

            margin-top: 2px;

            outline: 0 none;

            padding: 5px 0px 5px 5px;

            width: 70%;

            border-radius: 2px;

            -webkit-border-radius: 2px;

            -moz-border-radius: 2px;

            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

            background: #DFDFDF;

        }

        .dark-matter select {

            background: #DFDFDF url('/media/images/down2.png') no-repeat right;
            appearance: none;
            -webkit-appearance: none;

            -moz-appearance: none;

            text-indent: 0.01px;

            text-overflow: '';

            width: 70%;

            height: 35px;

            color: #525252;

            line-height: 25px;

        }

        .dark-matter textarea {

            height: 100px;

            padding: 5px 0px 0px 5px;

            width: 70%;

        }

        .dark-matter .button {
            margin: 10px 100px;
            background: #FFCC02;

            border: none;

            padding: 10px 70px 10px 70px;

            color: #585858;

            border-radius: 4px;

            -moz-border-radius: 4px;

            -webkit-border-radius: 4px;

            text-shadow: 1px 1px 1px #FFE477;

            font-weight: bold;

            box-shadow: 1px 1px 1px #3D3D3D;

            -webkit-box-shadow: 1px 1px 1px #3D3D3D;

            -moz-box-shadow: 1px 1px 1px #3D3D3D;

        }

        .dark-matter .button:hover {
            color: #333;
            background-color: #EBEBEB;
        }


        #main {
            height: 90%;
            /* background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%); */
            overflow: hidden;
            position: relative;

            /*o background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%); */
            /* background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%); */
            /* background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%); */
            /* background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);  */
            /* background-image: linear-gradient(to right, #ebbba7 0%, #cfc7f8 100%);  */
            /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #989898;
            background-blend-mode: multiply, multiply; */
            /* background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); */
            background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
            /* background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%); */
            /* background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%); */
            /* background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%); */
            /* background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%); */
        }

        .vedioDiv {
            position: absolute;
            top: 40px;
            left: 250px;


            width: 1000px;
            height: 600px;
            background-color: rgba(0, 0, 0, .3);
        }


        .vedioDiv::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .vedioDiv::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
            background: #535353;
        }

        .vedioDiv::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            /* background: #EDEDED; */
            background: rgba(0, 0, 0, 0.05);
        }


        #wrap1,
        #wrap2,
        #wrap3,
        #wrap4 {
            width: 90%;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
            position: relative;
            /* background: url(123.jpg) no-repeat center/100% 100%; */
        }

        .resizeBox {
            width: 100px;
            height: 100px;
            min-width: 100px;
            min-height: 40px;
            position: absolute;
            left: 0px;
            top: 0px;
            border: 1px dashed #ccc;
            cursor: move;
            user-select: none;
        }

        .resizeContent {
            width: 100%;
            height: 100%;
        }

        .dragBlock {
            width: 6px;
            height: 6px;
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid #000;
            background: #fff;
            cursor: e-resize;
        }

        .dragBlock.upDragBlock {
            left: 50%;
            margin-left: -2.5px;
            margin-top: -3px;
            cursor: n-resize;
        }

        .dragBlock.downDragBlock {
            left: 50%;
            top: 100%;
            margin-left: -2.5px;
            margin-top: -2px;
            cursor: s-resize;
        }

        .dragBlock.leftDragBlock {
            top: 50%;
            margin-left: -3px;
            margin-top: -2.5px;
            cursor: w-resize;
        }

        .dragBlock.rightDragBlock {
            left: 100%;
            top: 50%;
            margin-left: -2px;
            margin-top: -2.5px;
            cursor: e-resize;
        }

        .dragBlock.leftUpDragBlock {
            margin-left: -3px;
            margin-top: -3px;
            cursor: nw-resize;
        }

        .dragBlock.leftDownDragBlock {
            top: 100%;
            margin-left: -3px;
            margin-top: -2px;
            cursor: sw-resize;
        }

        .dragBlock.rightUpDragBlock {
            left: 100%;
            margin-left: -2px;
            margin-top: -3px;
            cursor: ne-resize;
        }

        .dragBlock.rightDownDragBlock {
            left: 100%;
            top: 100%;
            margin-left: -2px;
            margin-top: -2px;
            cursor: se-resize;
        }

        .butDiv {
            text-align: center;
            margin-top: 10px;
        }

        .butt {
            padding: 5px 100px;
        }

        .titleDiv{
            padding :5px 50px;
            font-size: 20px;
            color: #fff;
        }

        #wrap1{
            background:url(/media/cameraArea/camera1.jpg) no-repeat;
            background-size:100% 100%;
        }
        #wrap2{
            background:url(/media/cameraArea/camera2.jpg) no-repeat;
            background-size:100% 100%;
        }
        #wrap3{
            background:url(/media/cameraArea/camera3.jpg) no-repeat;
            background-size:100% 100%;
        }
        #wrap4{
            background:url(/media/cameraArea/camera4.jpg) no-repeat;
            background-size:100% 100%;
        }



    </style>
</head>

<body>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header dark-matter">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新人信息录入</h4>
                <span>录入照片</span>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form enctype="multipart/form-data" action="{% url 'trustedStaffForm' %}" method="post"
                      class="dark-matter" id="trustForm">
                    {%csrf_token %}
                    <label>
                        <span>姓名 :</span>
                        <input id="name" type="text" name="name" placeholder="姓名"/>

                    </label>

                    <label>

                        <span>年龄:</span>

                        <input id="age" type="text" name="age" placeholder="年龄"/>

                    </label>

                    <label>
                        <span>性别:</span>
                        <select name="selection">
                            <option value="man">男</option>
                            <option value="woman">女</option>
                        </select>
                    </label>
                    <label>
                        <span>邮箱 :</span>
                        <input id="email" type="email" name="email" placeholder="有效的邮箱地址"/>
                    </label>

                    <label>
                        <span>人脸照片 :</span>
                        <img id="image-preview" width="200" height="200">
                        <input style="margin-left:170px;" type="file" id="file" name="upload_image"
                               accept="image/gif, image/jpeg, image/png, image/jpg">
                    </label>

                </form>
            </div>
            <div class="modal-footer" style="background-color: #555555;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="mySubmit('trustForm')">提交</button>
            </div>
        </div>
    </div>
</div>
 <div class="menuToggle"></div>
  <div class="sidebar">
    <ul>
      <li class="logo" style="--bg: #333;">
        <a href="">
          <div class="icon"><img style="width: 80px;" src="../media/back/gas.png" alt="Gas Station Icon"></div>
          <div class="text">智慧加油站</div>
        </a>
      </li>
      <div class="menu-list">
     <!--   <li style="--bg:#f44336;" class="active">
          <a href="#">
            <div class="icon"><ion-icon name="home-outline"></ion-icon></div>
            <div class="text">首页</div>
          </a>
        </li> -->
              <!-- <li><a href="{% url 'gly-rt-monitor' %}">实时监控</a> </li>
                        <li><a href="{% url 'record' %}"> 查看入侵记录 </a></li>
                          <li><a href="{%url 'vedioPage' %}"> 查看视频 </a></li>
                        <li> <a href="{% url 'statistic' %}"> 入侵统计</a></li> -->
        <li style="--bg:darkblue;">
         <a href="{% url 'gly-rt-monitor' %}">
            <div class="icon"><ion-icon name="eye-outline"></ion-icon></div>
            <div class="text">实时监控</div>
          </a>
        </li>

        <li style="--bg:springgreen;">
         <a href="{% url 'record' %}">
            <div class="icon"><ion-icon name="warning-outline"></ion-icon></div>
            <div class="text">查看入侵</div>
          </a>
        </li>

        <li style="--bg:#ffa117;" >
          <a href="{%url 'vedioPage' %}">
            <div class="icon"><ion-icon name="videocam-outline"></ion-icon></div>
            <div class="text">查看视频</div>
          </a>
        </li>

        <li style="--bg:#292c39;">
         <a href="{% url 'statistic' %}">
            <div class="icon"><ion-icon name="analytics-outline"></ion-icon></div>
            <div class="text">入侵统计</div>
          </a>
        </li>

<!--        <li style="&#45;&#45;bg:purple;">-->
<!--        <a href="#" data-toggle="modal" data-target="#myModal">-->
<!--            <div class="icon"><ion-icon name="person-outline"></ion-icon></div>-->
<!--            <div class="text">行人信息导入</div>-->
<!--          </a>-->
<!--        </li>-->
          {% if status > 0 %}
		<li style="--bg:#ffa117;">
		  <a href="{% url 'infoManager' %}">
		    <div class="icon"><ion-icon name="document-outline"></ion-icon></div>
		    <div class="text">信息管理</div>
		  </a>
		</li>
          {% endif %}
		<li style="--bg:pink;"class="active">
		  <a href="{% url 'setMonitorPage' %}">
		    <div class="icon"><ion-icon name="settings-outline"></ion-icon></div>
		    <div class="text">监控区域设置</div>
		  </a>
		</li>
      </div>
	  <div class="bottom">
	    <li style="--bg:#333;">
	      <a href="#">
	        <div class="icon">
	          <div class="imgBx">
	            <img src="../media/video/images/user.jpg" alt="user">
	          </div>
	        </div>
	        <div class="text">manager</div>
	      </a>
	    </li>

	    <li style="--bg:#333;">
	      <a href="{% url 'login'%}">
	        <div class="icon"><ion-icon name="log-out-outline"></ion-icon></div>
	        <div class="text">退出</div>
	      </a>
	    </li>

	  </div>
    </ul>

  </div>





<div class="vedioDiv" style="color: pink;">
        <div>
<style>
	.nav-tabs a {
	    color: hotpink;
	    /* Add any other desired styles */
	}
</style>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                          data-toggle="tab">加油站出口</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                           data-toggle="tab">加油站入口</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                           data-toggle="tab">加油机</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                                           data-toggle="tab">危险区域</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">

                <div role="tabpanel" class="tab-pane fade in active" id="home">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form1">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span style="color: hotpink;;">区域名:</span>
                            <input type="text" id="input1 " class="input_zpc" name="regionName">
                        </div>

                        <div id="wrap1">
                            <div class="resizeBox" id="resizeBox1">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent" title="我是什么？我是一个能自由变化大小的小盒子～">
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="butDiv">
                        <button class="btn btn-success butt" id="butt1" onclick="regionForm('摄像头1','form1')" >
                        提交
                        </button>
                    </div>

                </div>

                <div role="tabpanel" class="tab-pane fade" id="profile">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form2">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span>区域名:</span>
                            <input type="text" id="input2" class="input_zpc " name="regionName">
                        </div>

                        <div id="wrap2">
                            <div class="resizeBox" id="resizeBox2">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent" title="我是什么？我是一个能自由变化大小的小盒子～">
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="butDiv">
                        <button class="btn btn-success butt" id="butt2"
                                onclick="regionForm('摄像头2','form2')">提交
                        </button>
                    </div>

                </div>
                <div role="tabpanel" class="tab-pane fade" id="messages">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form3">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span>区域名:</span>
                            <input type="text" id="input3" class="input_zpc" name="regionName">
                        </div>

                        <div id="wrap3">
                            <div class="resizeBox" id="resizeBox3">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent" title="我是什么？我是一个能自由变化大小的小盒子～">
                                </div>
                            </div>
                        </div>

                    </form>
                    <div class="butDiv">
                        <button class="btn btn-success butt" id="butt3"
                                onclick="regionForm('摄像头3','form3')">提交
                        </button>
                    </div>

                </div>
                <div role="tabpanel" class="tab-pane fade" id="settings">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form4">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span>区域名:</span>
                            <input type="text" id="input4" class="input_zpc" name="regionName">
                        </div>

                        <div id="wrap4">
                            <div class="resizeBox" id="resizeBox4">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent">
                                </div>
                            </div>
                        </div>
                    </form>
					<style>
						.btn.btn-success.butt {
						    background-color: pink;
						    /* Add any other desired styles */
						}
					</style>
                    <div class="butDiv" >
                        <button class="btn btn-success butt" id="butt4"
                                onclick="regionForm('摄像头4','form4')">提交
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="js/script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script>
    const menuToggle = document.querySelector('.menuToggle'),
          sidebar = document.querySelector('.sidebar'),
          Menulist = document.querySelectorAll('.menu-list li')
    menuToggle.onclick = function(){
      menuToggle.classList.toggle('active')
      sidebar.classList.toggle('active')
    }

    function activeLink() {
      Menulist.forEach((item) =>
        item.classList.remove('active')
      )
      this.classList.add('active')
    }

    Menulist.forEach((item) =>
      item.addEventListener('click', activeLink)
    )
	</script>



 <script>
   const modal = document.getElementById('myModal');
   const invasionLink = document.querySelector('.menu-list li a[href="#record"]');
   const monitoringLink = document.querySelector('.menu-list li a[href="#gly-rt-monitor"]');
   const pedestrianImportLink = document.querySelector('.menu-list li a[href="#person-import"]');
   const infoManagerLink = document.querySelector('.menu-list li a[href="#info-manager"]');
   const setMonitorLink = document.querySelector('.menu-list li a[href="#set-monitor"]');
   const setvedioPageLink = document.querySelector('.menu-list li a[href="#vedioPage"]');

   modal.addEventListener('hidden.bs.modal', function () {
     invasionLink.parentElement.classList.add('active');
   });

   modal.querySelector('button[type="submit"]').addEventListener('click', function () {
     invasionLink.parentElement.classList.add('active');
   });
 </script>
<script src="/static/js/resize.js" type="text/javascript" charset="utf-8"></script>
<script>

<!--onclick="regionForm('摄像头1','form1')"-->

<!--var butt1=document.getElementById('butt1')-->
<!--butt1.onclick=function(){-->
<!--    regionForm('摄像头1','form1');-->
<!--}-->

    function regionForm(cameraId,formId){
         var form = document.getElementById(formId);
         var input =document.createElement('input');
         input.setAttribute('name','cameraId');
         input.setAttribute('value',cameraId);
         form.append(input);

         var odiv;
         var imageDiv;
        if(cameraId=='摄像头1'){
            imageDiv= document.getElementById('wrap1');
            odiv = document.getElementById('resizeBox1');
        }else if(cameraId=='摄像头2'){
            imageDiv= document.getElementById('wrap2');
            odiv = document.getElementById('resizeBox2');
        }else if(cameraId=='摄像头3'){
            imageDiv= document.getElementById('wrap3');
            odiv = document.getElementById('resizeBox3');
        }else if(cameraId=='摄像头4'){
            imageDiv= document.getElementById('wrap4');
            odiv = document.getElementById('resizeBox4');
        }

        console.log((odiv.getBoundingClientRect().x-imageDiv.getBoundingClientRect().x)/imageDiv.getBoundingClientRect().width);
        console.log((odiv.getBoundingClientRect().y-imageDiv.getBoundingClientRect().y)/imageDiv.getBoundingClientRect().height);
        console.log(odiv.getBoundingClientRect().width/imageDiv.getBoundingClientRect().width);
        console.log(odiv.getBoundingClientRect().height/imageDiv.getBoundingClientRect().height);


         var input_x =document.createElement('input');
         input_x.setAttribute('name','xRatio');
         input_x.setAttribute('value',(odiv.getBoundingClientRect().x-imageDiv.getBoundingClientRect().x)/imageDiv.getBoundingClientRect().width);
         form.append(input_x);

         var input_y =document.createElement('input');
         input_y.setAttribute('name','yRatio');
         input_y.setAttribute('value',(odiv.getBoundingClientRect().y-imageDiv.getBoundingClientRect().y)/imageDiv.getBoundingClientRect().height);
         form.append(input_y);

         var input_width =document.createElement('input');
         input_width.setAttribute('name','wRatio');
         input_width.setAttribute('value',odiv.getBoundingClientRect().width/imageDiv.getBoundingClientRect().width);
         form.append(input_width);

         var input_h =document.createElement('input');
         input_h.setAttribute('name','hRatio');
         input_h.setAttribute('value',odiv.getBoundingClientRect().height/imageDiv.getBoundingClientRect().height);
         form.append(input_h);
         form.submit();
    }

    function mySubmit(formId) {
        var form = document.getElementById(formId);
        form.submit();
    }


    let fileInput = document.getElementById('file');
    let info = document.getElementById('info');
    let preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function () {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = fileInput.files[0];
        let size = file.size;
        if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result;
            console.log(preview, 'a标签')
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });



    $('.form_datetime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        autoclose: true,
        /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        dateFormat: 'yyyy-mm-dd',//日期显示格式
        timeFormat: 'HH:mm:ss',//时间显示格式
        todayBtn: 1,
        autoclose: 1,
        minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
        minuteStep: 1//分钟间隔1分钟
    });





    $(document).ready(function () {
        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;
        trigger.click(function () {
            hamburger_cross();
        });
        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }
        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    });






    //查询功能
<!--    var btn = document.getElementById('query-btn')-->
<!--    btn.onclick = function () {-->
<!--        queryTable();-->
<!--    }-->
<!--    function queryTable() {-->
// <!--        // startTime,endTime-->
<!--        startTime = document.getElementById('startTime').value;-->
<!--        endTime = document.getElementById('endTime').value;-->
<!--        if (!startTime || !endTime) {-->
<!--            return-->
<!--        }-->
<!--        var startDate = new Date(startTime);-->
<!--        var endDate = new Date(endTime);-->
<!--        trs = document.querySelectorAll('.recBody tr');-->
<!--        console.log(trs);-->
<!--        for (var i = 0; i < trs.length; i++) {-->
<!--            var recDate = new Date(trs[i].getElementsByTagName("td")[1].innerHTML);-->


<!--            if (startDate <= recDate && recDate <= endDate) {-->
<!--                trs[i].style.display = '';-->
<!--            } else {-->
<!--                trs[i].style.display = 'none';-->
<!--            }-->
<!--        }-->
<!--    }-->




</script>

</html>